import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Footer from '@/components/layout/Footer';
import Header from '@/components/layout/Header';
import Navigator from '@/components/layout/Navigator';
import NotFound from '@/pages/errors/NotFound';
// import Home from '@/pages/home';
import Login from '@/pages/login';
import Main from '@/pages/main';
import Material from '@/pages/material';
import Setting from '@/pages/setting';
import Withdraw from '@/pages/withdraw';
import AuthRoute from '@/routes/AuthRoute';
import Index from '@/components/layout/index'

export const AppUtils = React.createContext<{ isMobile: boolean }>({
  isMobile: false,
});

function App() {
  const [isMobile, setIsMobile] = useState(
    window.innerWidth < 1024
  );
  
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 1024);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <>
      <BrowserRouter>
        <AppUtils.Provider value={{ isMobile }}>
        
            <Routes>
              <Route path="/login" element={<Login />} />
              {/* <Route path="/home" element={<Home />} /> */}
                {/* <Route path="/material" element={<Material />} />
                  <Route element={<AuthRoute />}>
                    <Route path="/" element={<Main />} />
                    <Route path="/withdraw" element={<Withdraw />} />
                    <Route path="/setting" element={<Setting />} />
                  </Route> */}
              <Route path="*" element={<Index />} />
            </Routes>
          {/* <Footer /> */}
        </AppUtils.Provider>
      </BrowserRouter>
    </>
  );
}

export default App;
